---
title: React Forms - Flowbite
description: Use the forms elements from Flowbite React to start receiving user input data based on input elements, checkboxes, radio buttons, file uploads based on multiple sizes, colors, and styles
---

The form elements from Flowbite React can help you to collect input data from your website visitors by using input field elements, checkboxes, radios, file upload elements, and more based on React and Tailwind CSS.

These components can be used to create form submission pages, authentication features for your users and you can use the elements together with other components from Flowbite React such as with modals, cards, and more.

Check out the form elements from Flowbite React on this page and customize the value and options using the React props API and customize the styles using Tailwind CSS.

Make sure that you import the appropiate components from the `flowbite-react` library:

```jsx
// only import what you want to use
import {
  Button,
  Checkbox,
  FileInput,
  Label,
  Radio,
  RangeSlider,
  Select,
  Textarea,
  TextInput,
  ToggleSwitch,
} from "flowbite-react";
```

## Default form

Use this example of a form component with `<TextInput>`, `<Checkbox>`, `<Label>` and `<Button>` elements to create a basic user authentication form and access the value of the component by accessing the `value` attribute.

<Example name="forms.root" />

## Input sizing

Use the `sizing` prop on the `<TextInput>` form component from React to set the size of the input fields. You can choose from the `sm`, `md`, and `lg` size options.

<Example name="forms.inputSizing" />

## Disabled inputs

Disable the input fields by passing the `disabled` and `readOnly` props to the `<TextInput>` React component.

<Example name="forms.disabledInputs" />

## Inputs with shadow

Pass the `shadow` prop to the form components from React to automatically add a shadow style.

<Example name="forms.shadowInputs" />

## Form helper text

Show a helper and descriptive text next to the input field to improve UI/UX when submitting forms.

<Example name="forms.helperText" />

## Input groups with icon

Use this example to show an icon inside the input component by passing the `icon` prop.

<Example name="forms.inputLeftIcon" />

Show the icon on the right side of the input element by passing the `rightIcon` property.

<Example name="forms.inputRightIcon" />

Show an icon both on the left and right side of the component by passing both the `icon` and `rightIcon` props to the input field component from React.

<Example name="forms.inputLeftRightIcon" />

Use this example to show an input element with an alternatively style for showing icons.

<Example name="forms.inputAddon" />

## Form validation

Show form validation for success and error messages by using the `color` prop on the input field element and label components.

<Example name="forms.validation" />

## Input element colors

Update the color of the form elements by passing the `color` props to the input field components from React.

<Example name="forms.inputColors" />

## Textarea element

Use this example to show a textarea component in React and receive longer text from your users.

<Example name="forms.textarea" />

## Select input

This component can be used to allow users to select from multiple options based on the `<Select>` component.

<Example name="forms.select" />

## Checkbox

Use this example to show a list of options to your users that they can choose from by using the `<Checkbox> component.`

<Example name="forms.checkbox" />

## Radio button

Ask your users to choose only one value from multiple options based on the `<Radio>` component from React.

<Example name="forms.radioButton" />

## File upload

Use the `<FileInput>` component to allow users to upload files from their browser.

<Example name="forms.fileInput" />

## Toggle switch

Use the `<ToggleSwitch>` component to ask users to enable or disable an option such as newsletter settings.

<Example name="forms.toggleSwitch" />

## Range slider

The `<RangeSlider>` component can be used to allow users to select a number based on a minimum and maximum value.

<Example name="forms.rangeSlider" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

### File input theme

<Theme name="fileInput" />

### Label theme

<Theme name="label" />

### Radio button theme

<Theme name="radio" />

### Range slider theme

<Theme name="rangeSlider" />

### Text input theme

<Theme name="textInput" />

### Textarea theme

<Theme name="textarea" />

### Toggle switch theme

<Theme name="toggleSwitch" />

### Checkbox theme

<Theme name="checkbox" />

## References

- [Flowbite Forms](https://flowbite.com/docs/components/forms/)
